<template>
	<view>
		<view class="lis-box safe-btm">
			<view class="left-sidebar">
				<view class="li oneline-hide" v-for="(item,index) in classify" :key="item.id" @click="changeClassIfy(index)">
					<view :class="{'xian': index === selectedClassIdx}"></view>
					{{item.name}}
				</view>
			</view>
			<view class="right-sidebar">
				<view class="fader-li" v-for="(item, index) in classify[selectedClassIdx].children" :key="item.id">
					<view class="son-li">
						<view class="title">
							{{item.name}}
						</view>
						<view class="vtitle">
							<view class="tag" v-for="secondItem in item.children" :key="secondItem.id"
								@click="navToDetail(secondItem.id)">
								{{secondItem.name}}
							</view>
						</view>
					</view>
				</view>

			</view>


		</view>


	</view>
</template>

<script>
	import {
		StudyApi
	} from '@/api';
	export default {
		data() {
			return {
				classify: [],
				// 选中分类索引
				selectedClassIdx: 0,
			};
		},
		onLoad() {
			this.getData()
		},
		methods: {
			getData() {
				StudyApi.getGoodsCateList()
					.then(res => {
						this.classify = res.result
					})
					.catch(err => {
						this.$showToast(err || '加载失败')
					})
			},
			changeClassIfy(index) {
				this.selectedClassIdx = index
			},
			navToDetail(cat_id_3) {
				this.$navTo('pages/studys/sort', {
					cat_id_3,
					cat_id: this.classify[this.selectedClassIdx].id
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.lis-box {
		display: flex;
		width: 100vw;
		box-sizing: border-box;
		height: calc(100vh);

		.right-sidebar {
			padding: 40rpx 20rpx 40rpx 30rpx;
			height: 100%;
			overflow-y: auto;
			flex: 1;
			box-sizing: border-box;
			background-color: #fff;

			.fader-li {
				width: 465rpx;
				box-sizing: border-box;
				margin-bottom: 67rpx;

				.son-li {
					width: 100%;

					.title {
						font-size: 32rpx;
						font-weight: 400;
						font-family: "Source Han Sans";
					}

					.vtitle {
						display: flex;
						align-items: center;
						flex-wrap: wrap;

						.tag {
							margin-top: 15rpx;
							margin-right: 15rpx;
							padding: 11rpx 18rpx;
							font-size: 26rpx;
							font-weight: 400;
							border-radius: 10rpx;
							background: #f6f5fa;
						}
					}
				}
			}
		}

		.left-sidebar {
			padding: 40rpx 23rpx 0 4rpx;
			padding-right: 0;
			background: #f6f6f6;
			box-sizing: border-box;
			height: calc(100% - 50rpx);
			overflow-y: auto;

			.li {
				width: 196rpx;
				text-align: center;
				font-size: 30rpx;
				height: 107rpx;
				line-height: 107rpx;
				position: relative;

				.xian {
					position: absolute;
					top: 50%;
					right: 0rpx;
					transform: translateY(-50%);
					width: 14rpx;
					height: 42rpx;
					border-radius: 50rpx;
					opacity: 1;
					border: 1rpx solid #d8d8d8;
					background: #fb8b07;
				}
			}

		}

	}
</style>